<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title">GraphValidator</ui:define>
	<ui:define name="header">GraphValidator</ui:define>
	<ui:define name="content">
		抱歉，因为App Engine不能支持Java Awt图形库，所以你可能无法看到在线Demo,
		具体Demo请查看参考文档。
		
		<h3 style="margin-top:50px;"> Demo 1 终极简单使用示例  </h3>
		<hr />
		<h:form>
			<h:panelGrid columns="2" border="1">
				<h:outputText value="Validation Code:" />
				<q:graphValidator />
					
				<h:panelGroup />
				<h:commandButton value="Submit" />
			</h:panelGrid>
		</h:form>
		
		
		<h3 style="margin-top:50px;"> Demo 2 自定义输出图形  </h3>
		<hr />
		<h:form>
			<h:panelGrid columns="2" border="1">
				<h:outputText value="Validation Code:" />
				<q:graphValidator renderListener="#{graphValidatorBean.draw}" />
					
				<h:panelGroup />
				<h:commandButton value="Submit" />
			</h:panelGrid>
		</h:form>
		
		
	</ui:define>
	
	<ui:define name="description" >
		图形验证组件,功能相当强大而使用又相当简单，完全不需要自己编写验证逻辑。只要将组件放到
		页面上即可，一切交由组件完成。
	</ui:define>
	<ui:define name="htmlCode" >
		<h:outputText value="#{graphValidatorBean.htmlCode}" />
	</ui:define>
	<ui:define name="javaCode" >
		<h:outputText value="#{graphValidatorBean.javaCode}" />
	</ui:define>
</ui:composition>